<template>
    <div>
    <!--  条件表单    -->
      <el-form :inline="true"  style="padding-top: 20px">
        <el-form-item label="商品名" >
          <el-input v-model="form.name" style="width: 150px" placeholder="请输入商品名"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.region" placeholder="状态"  style="width: 120px">
            <el-option label="未上架" value="0"></el-option>
            <el-option label="已上架" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售时间">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success">添加</el-button>
        </el-form-item>
      </el-form>

    <!--  表格    -->
      <el-table
        :data="tableData3"
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          width="45">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="类别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="220">
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          width="170"
          label="商品单价">
        </el-table-column>
        <el-table-column

          width="200"
          label="商品状态">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column
          width="270"
          prop="date"
          label="销售时间">

        </el-table-column>
        <el-table-column
          prop="inventory"
          width="200"
          label="商品库存">
        </el-table-column>
        <el-table-column
          width="300px"
          label="操作">
            <el-button type="primary" icon="el-icon-edit">信息</el-button>
            <el-button type="primary" icon="el-icon-edit">属性</el-button>
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </el-table-column>

        <el-button type="primary">查询</el-button>
        <el-button type="danger" style="float: right">添加</el-button>
      </el-table>


<!--   底部分页   -->
      <div class="goodsInfo-footer">
        <div class="delet-emore">
          <el-button>批量删除</el-button>
        </div>

        <div class="goods-page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </div>
    </div>
</template>
<script>
  import goods from '@/api/goods'
export default {

  data() {
    return {
      value1:'',

      form:{

      },

      tableData3: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  created() {
    goods.getInfo().then(response=>{
      console.log(response)
    })
  }
}
</script>
<style lang="scss" scoped>
  .el-table__row li{
    list-style: none;
    padding: 5px 0;
  }
   .el-table__row  {
     .el-button{ font-size: 10px;}
  }

  .goodsInfo-footer{
    padding: 20px;
  }

  .goodsInfo-footer{
    .delet-emore{float: left}
    .goods-page{float: right}
  }

  .el-form{
    &.el-form--inline{
      .el-form-item{
        margin-left: 15px;
        button {
          width: 130px;
          letter-spacing: 3px;
        }
      }
      .el-form-item:last-child{
        float: right;
        padding-right: 30px;
      }
    }
  }

</style>
